<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物业费缴纳</title>
    <!-- 引入Layui CSS -->
    <link href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container" style="margin-top: 30px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">业主姓名</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" id="ownerName" lay-verify="required" name="ownerName"
                       placeholder="系统自动填充" readonly required type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">楼号</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" id="buildingNumber" lay-verify="required"
                       name="buildingNumber"
                       placeholder="系统自动填充" readonly required type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">单元号</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" id="unitNumber" lay-verify="required" name="unitNumber"
                       placeholder="系统自动填充" readonly required type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">门牌号</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" id="roomNumber" lay-verify="required" name="roomNumber"
                       placeholder="系统自动填充" readonly required type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">缴费周期</label>
            <div class="layui-input-block">
                <select lay-filter="paymentPeriod" lay-verify="required" name="paymentPeriod">
                    <option value="">请选择缴费周期</option>
                    <option value="12">12个月</option>
                    <option value="24">24个月</option>
                    <option value="36">36个月</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">缴费金额</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" id="payCount" lay-verify="required|number" name="amount"
                       placeholder="请输入缴费金额"
                       readonly required type="number">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="formDemo" lay-submit>立即提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 引入Layui JS -->
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;

        // 模拟从后端获取业主信息

        // 这里应该是从后端API获取数据，以下是模拟数据
        let area;
        $.ajax({
            type: "post",
            url: "/owner/id",
            data: {
                id: sessionStorage.getItem("userId")
            },
            success: function (data) {
                console.log(data);
                if (data.code === 200) {
                    $('#ownerName').val(data.data.name);
                    $('#buildingNumber').val(data.data.buildingName);
                    $('#unitNumber').val(data.data.unitName);
                    $('#roomNumber').val(data.data.houseName);
                    area = data.data.floorArea;
                }
            }
        })
        // 监听缴费周期的选择
        form.on('select(paymentPeriod)', function (data) {
            console.log("被选中");
            let period = data.value;
            $('input[name="amount"]').val(period * area);
            form.render(); // 重新渲染表单
        });


        // 监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            $.ajax({
                type: "post",
                url: "/propertyPayments/add",
                contentType: "application/json",
                data: JSON.stringify({
                    ownerId: sessionStorage.getItem("userId"),
                    amount: data.field.amount,
                    paymentPeriod: data.field.paymentPeriod + "个月"
                }),
                success: function (data) {
                    if (data.code === 200) {
                        layer.msg(data.msg);
                    }
                }
            })
            return false;
        });
    });
</script>
</body>
</html>
